<template>
    <div>
        <h2 v-bind:title="msg">{{msg}}</h2>
        <h2 :title="msg">:::::</h2>
        <img :src="imgsrc" :width="size" :height="size" alt="">
        <a :href="url">aaaaaaaa</a>
        <br>
        <div :style="[fontSize,bgcolor]">box</div>
        <div :class="[vcone, vctwo]">vue对象方式</div>
        <div :class="{one:isone, two:istwo}">样式类方式，vue对象控制</div>
        <br>
        <div :class="getStyleArr()">vue方法1</div>
        <div :class="getStyleObj()">vue方法2</div>
        <br>
        <div :class="{demo}">vue对象控制样式是否启用</div>
    </div>
</template>

<script>
    export default {
        name: "App",
        data() {
            return {
                msg: "this is test",
                imgsrc: "https://v3.vuejs.org/logo.png",
                url: "http://www.baidu.com",
                size: 100,
                fontSize: 'font-size:50px',
                bgcolor: 'background-color:green',
                vcone: 'one',
                vctwo: 'two',
                isone: true,
                istwo: false,
                demo: true
            }
        },
        methods: {
            getStyleArr() {
                return [this.vcone, this.vctwo];
            },
            getStyleObj() {
                return {one: this.isone, two: this.istwo};
            }
        }
    }
</script>

<style scoped>
    .one {
        font-size: 50px;
        background: red;
    }

    .two {
        font-size: 100px;
        background: greenyellow;
    }

    .demo {
        font-size: 10px;
        background: aqua;
    }

</style>